<template>
  <div id="search">
    <div class="search">
      <img :src="image1" alt="" id="image1" />
      <input type="text" class="keyWord" placeholder="搜索歌曲、歌手、专辑" 
      v-model="val" @keyup.enter="enter">
      <img :src="image2" alt="" id="image2" v-show="isShow" @click="del">
    </div>

    <div v-if="searchList.length==0" class="hotSearch">
        <span class="hottitle">热门搜索</span>
        <div class="hotpoints">
            <div @click="goSearch(item.first)" class="hotpoint" v-for="item in searchHot" :key="item.first">
                <span>{{item.first}}</span>
            </div>
        </div>
    </div>
    <!-- 搜索结果 -->
    <ul v-if="searchList.length>0">
        <li @click="goPlay(item.id)" v-for="item in searchList" :key="item.id">
            歌曲名称:{{item.name}}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      val: "",
      isShow: false,
      image1: require("../assets/images/big.png"),
      image2: require("../assets/images/del.png"),
      searchHot: [], //搜索热门标签
      searchList: [], //搜索结果
    };
  },
  watch: {
      val(newVal,oldVal){
          if(this.val == ""){
              this.isShow = false;
              this.searchList = [];
          }else{
              this.isShow = true;
          }
      }
  },
  mounted() {
    this.getSearchHot();
  },
  methods: {
      enter(){
          console.log('进入enter事件')
          //条件判断，剔除掉空值
          if(this.val === '') return
          this.goSearch(this.val)
      },

      del(){
          this.val = '',
          this.searchList = []
      },
    //封装一个获取热门搜索的接口
    async getSearchHot() {
      const { data: res } = await this.$axios.get("search/hot");
      console.log(res, "热门标签就是我");
      if (res.code === 200) {
        this.searchHot = res.result.hots;
      }
    },
    //调取搜索事件
    async goSearch(keywords) {
      this.val = keywords;
      const { data: res } = await this.$axios.get("search", {
        params: {
          keywords,
        },
      });
      if(res.code === 200){
          this.searchList = res.result.songs
      }
    },
    //播放事件
    goPlay(id){
        this.$router.push({
            path:'/play',
            query:{
                id
            }
        })
    }
  },
};
</script>

<style scoped>
input {
  background: none;
  border: none;
  outline: none;
  display: block;
}
.search {
  position: relative;
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.search .keyWord {
  margin: 15px 11px;
  position: absolute;
  width: 94%;
  height: 30px;
  line-height: 18px;
  padding: 0 30px;
  box-sizing: border-box;
  background: #ebecec;
  border-radius: 30px;
  border: 1px solid #ebecec;
}
input::-webkit-input-placeholder {
  color: #d3ccc9;
  font-size: 14px;
}

.search #image1 {
  position: absolute;
  top: 20.5px;
  left: 15px;
  z-index: 1;
}

.search #image2 {
  position: absolute;
  top: 17px;
  right: 15px;
  z-index: 1;
}

.hotSearch {
  width: 100%;
  height: 157px;
  box-sizing: border-box;
  padding: 15px 10px 0;
}

.hotSearch .hottitle {
  font-size: 12px;
  line-height: 12px;
  color: #666;
}

.hotSearch .hotpoints {
  margin-top: 12px;
}
.hotpoint {
  display: inline;
}

.hotpoint span {
  border: 1px solid#ebecec;
  font-size: 14px;
  padding: 0 14px;
  margin: 0 8px 8px 0;
  height: 32px;
  display: inline-block;
  line-height: 32px;
  border-radius: 50px;
  color: #333;
}
</style>